<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item :wrapper-col="{ span: 18 }">
      <a-input
        allowClear
        v-decorator="['username', { rules: [{ required: true, message: 'Please input your name!' }] }]"
      >
        <a-icon slot="prefix" type="user" />
      </a-input>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 18 }">
      <a-input-password
        allowClear
        v-decorator="['password', { rules: [{ required: true, message: 'Please input your password!' }] }]"
      >
        <a-icon slot="prefix" type="lock" />
      </a-input-password>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 18}">
      <a-checkbox
        v-decorator="['remember',{valuePropName: 'checked',initialValue: true}]"
      >Remember me</a-checkbox>
      <a-button type="primary" html-type="submit" style="width:100%">Login</a-button>
      <div style="justify-content: space-between;display: flex;">
        <nuxt-link to="/regist">Regist account</nuxt-link>
        <nuxt-link to="/forgot">Forgot password</nuxt-link>
      </div>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 18}">{{msg}}</a-form-item>
  </a-form>
</template>

<script>
import Crypto from "crypto-js";
export default {
  layout: "blank",
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this),
      msg: ""
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      let _this = this;
      _this.form.validateFields(async (err, values) => {
        if (!err) {
          let { status, data } = await this.$axios.post("/user/signin", {
            username: window.encodeURIComponent(values.username),
            password: Crypto.MD5(values.password).toString()
          });
          if (status == 200) {
            if (data && data.code === 0) {
              location.href = "/";
            } else {
              _this.msg = data.msg;
            }
          } else {
            _this.msg = "server err...";
          }
        }
      });
    }
  }
};
</script>